<div class="bjui-pageContent ">
     <form id="devices-sendconfig" method="post" class="form-horizontal" action="/devices/sendconfig" >
        <input type="hidden" name="sn" value="{{deviceSn}}">
    {{#if deviceConfigure}}
        <div class="form-group">
            <label class="col-lg-12 col-sm-12 control-label"><span class="required-span">*</span>添加协议字段:
            </label>
            <div class="col-lg-12 col-sm-12 user-protocol">
                <div class="form-group" style="width: 170px;display: inline-block;">
                    <select class="selectpicker show-tick form-control input-nm " name="configurationType1" id="configuration-type1" data-width="160" onchange="select_onchang1()">
                        <option value="" disabled selected  >请选择配置类型</option>
                    </select>
                </div>
                <input type="hidden" name="id1" class="kid1">
                <input type="text" class="input-nm tValue1" style="width: 160px;vertical-align: top;" disabled="true" placeholder="t值">
                <input type="text" name="k1" class="input-nm kValues1" style="width: 140px;vertical-align: top;" readonly="true"  placeholder="k值">
                <div class="form-group" style="width: 160px;display: inline-block;vertical-align: top;">
                    <input type="text" class="input-nm vValue1 form-control" style="width: 140px;"  name="v1" placeholder="数值" >
                </div>
            </div>
            <div class="col-lg-12 col-sm-12 user-protocol">
                <div class="form-group" style="width: 170px;display: inline-block;">
                    <select class="selectpicker show-tick form-control input-nm "  id="configuration-type2" data-width="160" onchange="select_onchang2()">
                        <option value="" disabled selected  >请选择配置类型</option>
                    </select>
                </div>
                <input type="hidden" name="id2" class="kid2">
                <input type="text" class="input-nm tValue2" style="width: 160px;vertical-align: top;" disabled="true" placeholder="t值">
                <input type="text" name="k2" class="input-nm kValues2" style="width: 140px;vertical-align: top;" readonly="true"  placeholder="k值">
                <div class="form-group" style="width: 160px;display: inline-block;vertical-align: top;">
                    <input type="text" class="input-nm vValue2 form-control" style="width: 140px;"  name="v2" placeholder="数值" >
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-12 col-sm-12 control-label">实时配置:
                 
            </label>
            <div class="col-lg-12 col-sm-12 real-time-configuration">
                <ul>
                    <li>
                      <input tabindex="3" type="radio" id="input-3" name="timeservice" value="true">
                      <label for="input-3">是</label>
                    </li>
                    <li style="margin-left: 20px">
                      <input tabindex="4" type="radio" id="input-4" name="timeservice" value="false" checked>
                      <label for="input-4">否</label>
                    </li>
                </ul>
            </div>
        </div>
    {{else}}
         <div class="form-group">
            <label class="col-lg-12 col-sm-12 control-label"><span class="required-span">*</span>配置数据:
                 
            </label>
            <div class="col-lg-12 col-sm-12">
                <textarea  style="width: 100%;height: 100px;" name="hexdata" ></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-12 col-sm-12 control-label">实时配置:
                 
            </label>
            <div class="col-lg-12 col-sm-12 real-time-configuration">
                <ul>
                    <li>
                      <input tabindex="3" type="radio" id="input-3" name="timeservice" value="true">
                      <label for="input-3">是</label>
                    </li>
                    <li style="margin-left: 20px">
                      <input tabindex="4" type="radio" id="input-4" name="timeservice" value="false" checked>
                      <label for="input-4">否</label>
                    </li>
                </ul>
            </div>
        </div>
    {{/if}}
    
       
        
    </form>
</div>

<div class="btns-group bjui-pageFooter">
    <button type="button" class="close-btn">取消</button>
    <button type="submit" class="save-btn">发送</button>
</div>
<script type="text/javascript">
    $(function(){
        $('.selectpicker').selectpicker();//初始化
        dialog_close();
        if('{{deviceConfigure}}'){
            get_ktv_list();
             $('#devices-sendconfig').find('[name="configurationType1"]') .selectpicker() .change(function(e) { 
            $('#devices-sendconfig').formValidation('revalidateField', 'configurationType1'); 
        }) .end().formValidation({  
            framework: 'bootstrap', 
            excluded: ':disabled',
            trigger:'blur', 
            icon: { valid: 'glyphicon glyphicon-ok', 
            invalid: 'glyphicon glyphicon-remove', 
            validating: 'glyphicon glyphicon-refresh' }, 
            fields: {  
                configurationType1: {
                    validators: {
                        notEmpty: {
                            message: '请选择配置类型'
                        }
                    }
                },
                v1: {
                    validators: {
                        notEmpty: {
                            message: '请填写数值'
                        }
                    }
                },
            }
        })
        .on('success.form.fv', function(e) {
                // Prevent form submission
                e.preventDefault();

                // Get the form instance
                var $form = $(e.target);

                // Get the FormValidation instance
                var bv = $form.data('formValidation');

                // Use Ajax to submit form data
                $.post($form.attr('action'), $form.serialize(), function(result) {
                    if(result.statusCode=='200'){
                        BJUI.alertmsg('ok',result.message);
                        BJUI.dialog('closeCurrent');
                    }else{
                        BJUI.alertmsg('error',result.message);
                    }
                }, 'json');
            }); 
        }else{
            $('#devices-sendconfig')
            .formValidation({
                trigger:'blur',
                icon: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    hexdata:{
                        validators: {
                            notEmpty: {
                                message: '请填写配置数据'
                            },
                            stringLength:{
                              message:'配置数据不得超过200个字符',
                              max:200
                            }
                        }
                    } 
                }
            })
            .on('success.form.fv', function(e) {
                // Prevent form submission
                e.preventDefault();

                // Get the form instance
                var $form = $(e.target);

                // Get the FormValidation instance
                var bv = $form.data('formValidation');

                // Use Ajax to submit form data
                $.post($form.attr('action'), $form.serialize(), function(result) {
                    if(result.statusCode=='200'){
                        BJUI.alertmsg('ok',result.message);
                        BJUI.dialog('closeCurrent');
                    }else{
                        BJUI.alertmsg('error',result.message);
                    }
                }, 'json');
            }); 
        }
        
        var callbacks_list = $('.demo-callbacks ul');
        $('.real-time-configuration input').on('ifCreated ifClicked ifChanged ifChecked ifUnchecked ifDisabled ifEnabled ifDestroyed', function(event){
          callbacks_list.prepend('<li><span>#' + this.id + '</span> is ' + event.type.replace('if', '').toLowerCase() + '</li>');
        }).iCheck({
          checkboxClass: 'icheckbox_square-blue',
          radioClass: 'iradio_square-blue',
          increaseArea: '20%'
        });

        
    })
    function select_onchang1(){
        $('#configuration-type1').attr('changeValue',true);
        // $(".field-save-btn").attr("disabled",false);
        if(objKtv){
             $.each(objKtv,function(i,item){
                if(item.id==$("#configuration-type1").selectpicker('val')){
                    $(".tValue1").val(item.tname);    
                    $(".kValues1").val(item.k);  
                    $(".kid1").val(item.id);  
                }
            })
        }
    }
    function select_onchang2(){
        $('#configuration-type2').attr('changeValue',true);
        // $(".field-save-btn").attr("disabled",false);
        if(objKtv){
             $.each(objKtv,function(i,item){
                if(item.id==$("#configuration-type2").selectpicker('val')){
                    $(".tValue2").val(item.tname);    
                    $(".kValues2").val(item.k);  
                    $(".kid2").val(item.id);  
                }
            })
        }
    }
    function get_ktv_list(){
        $.ajax({
            url:"/userProtocol/getKtvList",
            type:"post",
            dataType:"json",
            success:function(data){
                if(data.statusCode=='200' && data.list !=''){
                    objKtv=data.list;
                    $.each(data.list,function(i,item){
                        $("#configuration-type1").append("<option value="+item.id+">"+item.name+"</option>");
                    })
                }
                if(data.statusCode=='200' && data.list !=''){
                    objKtv=data.list;
                    $.each(data.list,function(i,item){
                        $("#configuration-type2").append("<option value="+item.id+">"+item.name+"</option>");
                    })
                }
                $("#configuration-type1").selectpicker('render');
                $("#configuration-type1").selectpicker('refresh');
                $("#configuration-type2").selectpicker('render');
                $("#configuration-type2").selectpicker('refresh');
            }
        })
    }
</script>